<template>
  <div>
    <source-template v-model="showSourceTemplateModal"></source-template>
    <source-img v-model="showSourceImgModal"></source-img>
    <source-chart v-model="showSourceChartModal"></source-chart>
    <source-svg v-model="showSourceSvgModal"></source-svg>
    <source-form v-model="showSourceFormModal"></source-form>
    <ul class="menu">
      <li @click="handlerAddRichText">
        <Icon size="20" type="star"></Icon>
        <p>富文本</p>
      </li>
      <li @click="handlerAddText">
        <Icon size="20" type="star"></Icon>
        <p>文字</p>
      </li>
      <li @click="handlerAddImg">
        <Icon size="20" type="star"></Icon>
        <p>图片</p>
      </li>
      <li @click="handlerAddSvg">
        <Icon size="20" type="star"></Icon>
        <p>形状</p>
      </li>
      <li @click="handlerAdd('showSourceFormModal')">
        <Icon size="20" type="star"></Icon>
        <p>表单</p>
      </li>
      <!-- <li>
        <Icon size="20" type="star"></Icon>
        <p>按钮</p>
      </li> -->
      <li @click="handlerAddChart">
        <Icon size="20" type="star"></Icon>
        <p>图表</p>
      </li>
      <li @click="handlerAddTemplate">
        <Icon size="20" type="star"></Icon>
        <p>模板</p>
      </li>
      <li>
        <Icon size="20" type="star"></Icon>
        <p>组件库</p>
      </li>
      <li>
        <Dropdown>
        <a href="javascript:void(0)">
          <Icon size="20" type="star"></Icon>
          <p>其他</p>
        </a>
        <DropdownMenu slot="list">
          <DropdownItem>背景</DropdownItem>
          <DropdownItem>音频</DropdownItem>
          <DropdownItem>视频</DropdownItem>
        </DropdownMenu>
    </Dropdown>
      </li>
    </ul>
  </div>
</template>
<script>
import {Vue, Component} from 'vue-property-decorator'
import {
  State,
  Getter,
  Action
} from 'vuex-class'
import {SourceImg, SourceChart, SourceTemplate, SourceSvg, SourceForm} from "@/views/work/modals/"
@Component({
  components: {
    SourceImg,
    SourceChart,
    SourceTemplate,
    SourceSvg,
    SourceForm
  }
})
export default class WorkHeader extends Vue {
  showSourceImgModal=false;
  showSourceChartModal=false;
  showSourceTemplateModal=false;
  showSourceSvgModal=false;
  showSourceFormModal=false;
  @Getter curElement
  @Action actAddElement
  handlerAddRichText ():void {
    let newElement = {
      type: "richText",
      transform: {
        width: 200
      },
      extra: {
        content: `<p>
                      <img src="http://img.baidu.com/hi/jx2/j_0001.gif"/>这是个富文本
                  </p>`
      }

    }
    this.actAddElement(newElement)
  }
  handlerAddText ():void {
    let newElement = {
      type: "text",
      transform: {
        width: 200,
        height: 40
      },
      extra: {
        text: "这是一段文本",
        color: "#333"
      }

    }
    this.actAddElement(newElement)
  }

  handlerAddImg ():void {
    this.showSourceImgModal = true
  }

  handlerAddChart ():void {
    this.showSourceChartModal = true
  }

  handlerAddTemplate ():void {
    this.showSourceTemplateModal = true
  }

  handlerAddSvg ():void {
    this.showSourceSvgModal = true
  }

  handlerAdd(modal): void {
    this[modal] = true;
  }
}
</script>
<style lang="less" scoped>
.menu{
  text-align: center;
  display: flex;
  justify-content: space-between;
  >li{
    width:60px;
    padding-top: 10px;
    cursor: pointer;
    text-align: center;
    line-height: 18px;
    a{
      color: #fff;
    }
  }
}
</style>
